<%--
  Created by IntelliJ IDEA.
  User: chang
  Date: 2020/12/3
  Time: 15:40
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>换房记录</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/style/layui/css/layui.css" charset="GBK">
    <script src="${pageContext.request.contextPath}/style/layui/layui.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/style/jquery-2.1.0.js"></script>
</head>
<body>
    <div class="layui-elem-field">
        <form class="layui-form layui-form-pane">
            <div class="layui-row">
                <div class="layui-inline layui-col-md-offset1">
                    <label class="layui-form-label">换房前房间</label>
                    <div class="layui-input-block">
                        <input type="text" name="Soldroomid" class="layui-input" placeholder="换房前房间">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">换房后房间</label>
                    <div class="layui-input-inline">
                        <input type="text" name="Snewroomid" class="layui-input" placeholder="换房后房间">
                    </div>
                </div>
            </div>
            <hr>
            <div class="layui-row">
                <div class="layui-inline layui-col-md-offset1">
                    <label class="layui-form-label">开始时间</label>
                    <div class="layui-input-block">
                        <input type="date" id="btime" name="btime" class="layui-input" placeholder="开始时间">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">结束时间</label>
                    <div class="layui-input-inline">
                        <input type="date" id="etime" name="etime" class="layui-input" placeholder="结束时间">
                    </div>
                    <button type="submit" lay-submit lay-filter="searchBtn"
                            class="layui-btn layui-btn-radius layui-btn-normal layui-icon layui-icon-search">搜索
                    </button>
                    <button type="reset" class="layui-btn" id="searchReset">重置</button>
                </div>
            </div>
        </form>
    </div>
    <!--数据表格-->
    <table class="layui-hide " id="test" lay-filter="test"></table>
    <!--上侧按钮组-->
    <div class="layui-hide" id="userToolbar">
        <label class="layui-icon layui-icon-refresh layui-anim layui-anim-scaleSpring" lay-event="refresh"></label>
    </div>
    <!--数据表格右侧按钮组-->
    <script>
        layui.use(['table','layer','form'], function () {
            var $ = layui.jquery;
            var layer = layui.layer;
            var form = layui.form;
            var table = layui.table;
            var condition = "";
            form.on('submit(searchBtn)',function (data){
                table.reload("test",{
                    page:{
                        curr:1
                    },where:data.field
                });
                return false;
            });
            //重置时要刷新页面
            $("#searchReset").click(function (){
                location=location;
            });

                table.render({
                    elem: '#test'
                    , url: '${pageContext.request.contextPath}/queryChangeRoom'//数据接口
                    , toolbar: '#userToolbar'
                    , even: true //开启隔行背景
                    , page: true //开启分页
                    /*, request: {
                        pageName: 'cur',
                        limitName: 'nums',

                    }*/
                    ,where: {condition: condition}
                    , text: {
                        none: '暂无相关数据'
                    }
                    , cols: [[ //表头
                          {field: 'id', title: 'ID', align: 'center'}
                        , {field: 'name', title: '入住人姓名', align: 'center'}
                        , {field: 'tel', title: '电话', align: 'center'}
                        , {field: 'ruzhuid', title: '订单编号', align: 'center'}
                        , {field: 'time', title: '换房时间', align: 'center'}
                        , {field: 'oldroomid', title: '换房前房间', align: 'center'}
                        , {field: 'newroomid', title: '换房后房间', align: 'center'}
                    ]]
                    , limit: 10
                    , limits: [10, 15, 20, 30, 40, 50]
                });
            //头工具栏事件
            table.on('toolbar(test)', function(obj){
                var checkStatus = table.checkStatus(obj.config.id);
                switch(obj.event){
                    case 'refresh':
                        location=location;
                        break;
                }
            })
        });
    </script>
</body>
</html>
